<template>
<div>
<!--    修改信息开始-->
    <el-dialog title="修改信息" :visible.sync="dialogFormVisible">
        <el-form :model="spare">
            <el-form-item label="配件名称" :label-width="formLabelWidth">
                <el-input v-model="spare.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="配件编号" :label-width="formLabelWidth">
                <el-input v-model="spare.number" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="机型" :label-width="formLabelWidth">
                <el-input v-model="spare.jixing" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="类型" :label-width="formLabelWidth">
                <el-input v-model="spare.leixing" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input v-model="spare.demo" autocomplete="off"></el-input>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateSpare(spare)">确 定</el-button>
        </div>
    </el-dialog>
<!--    修改信息结束-->
    <el-row>
        <el-col :span='6'>
            <el-row>
                <el-col :span='12'>
                    <el-input v-model='searchValue' placeholder='请输入配件名称'></el-input>
                </el-col>
                <el-col :span='12'>
                    <el-button v-on:click='search' type='primary'>检索</el-button>
                </el-col>
            </el-row>
            <br>
            <br>
        <el-card>
            <div class='lieb' v-for='item in tableData' v-on:click='spareInfoClick(item)'> {{item.name}}</div>
            <el-pagination
                background
                small
                layout="prev, pager, next"
                @current-change="handleCurrentChange"
                :current-page='current'
                :total="total">
            </el-pagination>
        </el-card>
        </el-col>
        <el-col :span='18'>
            <el-descriptions class="margin-top info" title="粮食机器配件" :column="3" :size="size" border>
                <template slot="extra">
                    <el-button type="primary" v-on:click='dialogFormVisible = true' size="small">修改信息</el-button>
                </template>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-user"></i>
                        配件名称
                    </template>
                   {{spare.name}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-mobile-phone"></i>
                        配件编号
                    </template>
                   {{spare.number}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-location-outline"></i>
                       机型
                    </template>
                    {{spare.jixing}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-tickets"></i>
                       类型
                    </template>
                    <el-tag size="small">{{spare.leixing}}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-office-building"></i>
                        备注
                    </template>
                    {{spare.demo}}
                </el-descriptions-item>
            </el-descriptions>
        </el-col>
    </el-row>
</div>
</template>

<script>
export default {
    created() {
        this.$http.get("/v1/spare/list").then(res =>{
            this.tableData = res.records
            this.total = res.total
            this.current = res.current
            this.spare = this.tableData[0]
        })
    },
    data(){
        return{
            tableData:[],
            total:1,
            current:10,
            searchValue:'',
            spare:{},
            dialogFormVisible: false,
            formLabelWidth: '120px'
        }
    },
    methods:{
        handleCurrentChange(page){
            this.$http.get("/v1/spare/list?page="+page * 1).then(res =>{
                this.tableData = res.records
                this.total = res.total
                this.current = res.current
            })
        },
        search(){
            this.$http.get("/v1/spare/search?name="+this.searchValue).then(res =>{
                this.tableData = res
                this.current = 1
                this.total = 10
            })
        },
        spareInfoClick(data){
            this.spare = data
        },
        updateSpare(data){
            this.$http.post("/v1/spare/save",data).then(res => {
                this.dialogFormVisible = false
                this.$notify({
                    title: '成功',
                    message: '成功保存',
                    type: 'success'
                });
            })
        }
    }
}
</script>

<style scoped>
.lieb{
    font-size: large;
    text-align: center;
    background-color: #0d638f;
    height: 50px;
    width: 200px;
    cursor:pointer;
    margin: 10px;
    color: white;
}
.info{
    margin-left: 5%;
}
</style>
